*{
    margin: 0;
    padding: 0;
    list-style: none;
}

main{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    height: 100vh;
    justify-items: center;
    align-items: center;
    max-width: 800px;
    margin: 0 auto;
}
main > div{
    transform: scale(1.5);
}


/* No1 */
.circle-loading {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 4px solid rgb(184, 187, 191);
    border-radius : 50%;
    width: 40px;
    height: 40px;
    font-size: 12px;
    font-weight: bold;
    color: rgb(172, 28, 177);
    box-shadow: 0 1px 2px 1px rgba(0, 0, 0, .2),
    inset 0 1px 2px 1px rgba(0, 0, 0, .2);
}
.circle-loading::before{
    content: "";
    position: absolute;
    left: calc(50% - 24px);
    top : calc(50% - 24px);
    display: block;
    border: 4px solid transparent; 
    border-top-color: rgb(172, 28, 191);
    border-radius : 50%;
    width: 40px;
    height: 40px;
    animation : rotate1 2s ease infinite;
}
@keyframes rotate1{
    from {
        transform: rotate(0);
    }
    to{
        transform: rotate(360deg);
    }
}

/* No2 */
.bubble-loading{
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius : 50%;
    width: 40px;
    height: 40px;
    background : linear-gradient(45deg, rgb(14,14,46),rgb(64,64,113));
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    box-shadow: 0 3px 2px 1px rgba(0,0,0,.2);
}
.bubble-loading::before,
.bubble-loading::after{
    content : "";
    position: absolute;
    left: calc(50% -20px);
    top: calc(50% -20px);
    width: 40px;
    height: 40px;
    background-color: rgb(51,149,230);
    border-radius : 50%;
    z-index: -1;
    transform: translateY(-2px);
}
.bubble-loading::before{
    animation : rotate2 infinite 3s linear;
}
.bubble-loading::after{
    animation : rotate2 infinite 2s linear;
}
@keyframes rotate2{
    from{
        transform: rotate(0) translateY(-2px);
    }
    to{
        transform: rotate(360deg) translateY(-2px);
    }
}


/* No3 */
.teacup-loading {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 4px solid rgb(30, 29, 20);
    border-radius : 0 0 16px 16px;
    border-top-width: 0;
    width: 40px;
    height: 40px;
    font-size: 12px;
    font-weight: bold;
    background-color: #fff3da;
    color: rgb(30, 29, 20);
    overflow: hidden;
    box-shadow: 0 1px 2px 1px rgba(0, 0, 0, .2),
    inset 0 1px 2px 1px rgba(0, 0, 0, .2);
}
.teacup-loading::before,
.teacup-loading::after{
    content : "";
    position: absolute;
    left: 0;
    bottom: 0;
    right: -120px;
    height: 20px;
    z-index: 0;
    clip-path: polygon(
        0% 20%,
        2% 18%,
        3% 16%,
        5% 14%,
        7% 13%,
        8% 11%,
        10% 10%,
        12% 10%,
        13% 10%,
        15% 10%,
        17% 11%,
        18% 13%,
        20% 14%,
        22% 16%,
        23% 18%,
        25% 20%,
        27% 22%,
        28% 24%,
        30% 26%,
        32% 27%,
        33% 29%,
        35% 30%,
        37% 30%,
        38% 30%,
        40% 30%,
        42% 29%,
        43% 27%,
        45% 26%,
        47% 24%,
        48% 22%,
        50% 20%,
        52% 18%,
        53% 16%,
        55% 14%,
        57% 13%,
        58% 11%,
        60% 10%,
        62% 10%,
        63% 10%,
        65% 10%,
        67% 11%,
        68% 13%,
        70% 14%,
        72% 16%,
        73% 18%,
        75% 20%,
        77% 22%,
        78% 24%,
        80% 26%,
        82% 27%,
        83% 29%,
        85% 30%,
        87% 30%,
        88% 30%,
        90% 30%,
        92% 29%,
        93% 27%,
        95% 26%,
        97% 24%,
        98% 22%,
        100% 20%,
        100% 100%,
        0% 100%

    );
}
.teacup-loading::before{
    background-color: rgb(255,214,125);
    animation : move1 infinite 6s linear;
}
.teacup-loading::after{
    background-color: rgb(255,2174,0);
    animation : move2 infinite 2s linear;
}
@keyframes move1{
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-80px);
    }
}
@keyframes move2{
    from {
        transform: translateX(-20px);
    }
    to {
        transform: translateX(-100px);
    }
}

/* No4 */
.play-btn{
    position: relative;
    width: 40px;
    height: 40px;
    border-radius : 50%;
    background-image: linear-gradient(45deg, #5298ff,#ff00a8);
    box-shadow: 0 1px 2px 1px rgba(0, 0, 0, .2);
}
.play-btn::before{
    content: "";
    position: absolute;
    left: calc(21px - 4px); 
    top: calc(50% - 8px);
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-left-color: white;
    border-top-width: 8px;
    border-bottom-width: 8px;
    filter: drop-shadow(0 2px 1px rgba(0,0,0,.2));
    transition: all .2s ease;
    will-change: border-width,height, left;
}
.play-btn::after{
    content: "";
    position: absolute;
    right: calc(16px - 4px);
    top: calc(50% - 8px );
    width: 0;
    height: 16px;
    border: 5px solid transparent;
    border-width: 0 0 0 5px;
    border-left-color: #fff;
    filter: drop-shadow(0 2px 1px rgba(0,0,0,.2));
    opacity: 0;
    transform: scale(0);
    transition: all .2s ease;
}
.play-btn:hover::before{
    border-width: 0 0 0 5px;
    height: 16px;
    left: 16px;
}
.play-btn:hover::after{
    opacity: 1;
    transform: scale(1);
}

/* No5 */
.floating-btn {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius : 50%;
    background-image: linear-gradient(45deg, #52ffaf,#2196f3);
    box-shadow: 0 1px 2px 1px rgba(0, 0, 0, .2);
}
.floating-btn::before,
.floating-btn::after{
    content : "";
    position: absolute;
    left: calc(50% - 9px);
    top: 0;
    display: block;
    border-radius : 3px;
    width: 18px;
    height: 3px;
    background-color: #fff;
    transition: all .2s ease;
}
.floating-btn::before{
    transform: translateY(12px);
    filter: drop-shadow(0 6px 0 white);
}
.floating-btn::after{
    transform: translateY(24px);
}
.floating-btn:hover::before{
    filter : none;
    transform: translateY(18px) rotate(-45deg);
}
.floating-btn:hover::after{
    transform: translateY(18px) rotate(45deg);
}

/* No5 */
.progress-bar{
    position: relative;
    border-radius : 20px;
    width: 80px;
    height: 30px;
    background-color: #eee;
    transform: translateY(-34%);
}
.progress-bar::before{
    content: "";
    position: relative;
    z-index: 1;
    display: block;
    border-radius : 20px;
    height: 30px;
    width: 50%;
    background-image: linear-gradient(0deg, #ff7a3d, #ffc107);
    box-shadow: 0 1px 2px 0 #ff7a3b;
    filter : drop-shadow(2px 0 1px rgba(0,0,0,.2));
    transition: all .2s ease;
}
.progress-bar::after{
    content: "50%";
    position: absolute;
    left: 50%;
    transform: translate(-50%, 20%);
    font-size: 16px;
    font-weight: bold;
    color: #54390f;
}
.progress-bar:hover::before{
    width: 100%;
}
.progress-bar:hover::after{
    content: "100%";

}








